<template>
  <div id="app">

    <drawer width="200px;" :show.sync="drawerVisibility" show-mode="push" placement="left" :drawer-style="{width: '200px'}">

      <!-- drawer content -->
      <div id="drawer" slot="drawer">
        <i class="iconfont icon-toupiao"></i>
        <group title="关于系统">
          <cell is-link title="检测更新(TODO)" @click.native="onDrawer">
          </cell>
          <cell is-link title="注销登录" @click.native="onLogout">
          </cell>
        </group>
        <group title="选择语言">
          <radio :options="['中文', 'English(TODO)']" @on-change="onDrawer"></radio>
        </group>
      </div>

      <my-msg/>
      <!--<my-loading/>-->
      <router-view/>

    </drawer>
  </div>
</template>

<style lang="less">
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#app {
  height: 100%;
  #drawer {
    .iconfont.icon-toupiao {
      background-color: #35495e;
      font-size: 1.5rem;
      color: white;
      display: block;
      height: 40px;
      line-height: 40px;
      padding: 3px 12px;
    }
  }
}
</style>

<script>
import MyMsg from "./components/MyMsg.vue";
import { Drawer, Group, Cell, Radio } from "vux";
import { mapActions, mapMutations } from "vuex";
import { TOGGLE_DRAWER } from "@/store/mutation-types";

export default {
  name: "App",
  components: {
    MyMsg,
    Drawer,
    Group,
    Cell,
    Radio
  },
  computed: {
    drawerVisibility: {
      // getter
      get: function() {
        return this.$store.state.drawerVisibility;
      },
      // setter
      set: function(newValue) {
        this[TOGGLE_DRAWER]();
      }
    }
  },
  methods: {
    ...mapActions(["logout"]),
    ...mapMutations([TOGGLE_DRAWER]),
    onDrawer() {
      this[TOGGLE_DRAWER]();
    },
    onLogout() {
      this.logout();
      this.onDrawer();
    }
  }
};
</script>
